<!doctype html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Fira+Sans:400,400italic'
          rel='stylesheet' type='text/css'>

    <!--<link rel="stylesheet" href="./assets/weui/dist/style/weui.css">-->
    <link rel="stylesheet" href="./style/homepage_timelinereset.css">
    <link rel="stylesheet" href="./style/homepage_timeline.css">
    <link rel="stylesheet" href="./assets/weui/dist/style/weui.css">
    <link rel="stylesheet" href="./style/homepage.css">
    <script src="./assets/js/modernizr.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <title>Horizontal Timeline | CodyHouse</title>
</head>
<body ontouchstart="">

<!--<script type="text/html" id="tpl_picker">-->
<div class="page">
    <div class="page__bd page__bd_spacing date_picker">
        <div href="javascript:;" class="weui-btn weui-btn_default show_date" id="showYearPicker"></div>
        <div href="javascript:;" class="weui-btn weui-btn_default show_date" id="showMonthPicker"></div>
    </div>
</div>

<section class="cd-horizontal-timeline">
    <div class="timeline" id="cd-horizontal-timeline">
        <div class="events-wrapper">
            <div class="events">
                <ol id="timeline">
                    <li><a id="timeline_li" href="#0" data-date="" class="selected" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                    <li><a id="timeline_li" href="#0" data-date="" onclick="show(this)"></a></li>
                </ol>
                <span class="filling-line" aria-hidden="true"></span>
            </div> <!-- .events -->
        </div> <!-- .events-wrapper -->
        <ul class="cd-timeline-navigation">
            <li><a href="#0" class="prev inactive">Prev</a></li>
            <li><a href="#0" class="next">Next</a></li>
        </ul> <!-- .cd-timeline-navigation -->
        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item">
                    已处理
                </div>
                <div class="weui-navbar__item weui-bar__item_on">
                    未处理
                </div>
            </div>
        </div>
    </div> <!-- .timeline -->
</section>

<script type="text/javascript">
    function initWindow() {
        $('#showYearPicker').html(new Date().getFullYear()+" 年");
        $('#showMonthPicker').html(new Date().getMonth()+1+" 月");
        initDay();
    }
    function initDay(){
        var year = $('#showYearPicker').html().split(' ')[0];
        var month = $('#showMonthPicker').html().split(' ')[0];
        var day = new Date(year,month,0).getDate();
        var l_ol = document.querySelectorAll("#timeline_li");

        for(var i=0;i<31;i++){
            if(l_ol[i].className == 'selected'){
                if((i+1)>day){
                    l_ol[day-1].click();
                }
            }
            l_ol[i].setAttribute('data-date',(i+1)+'/'+(month)+'/'+year);
            var dayofmonth = i<9?'0'+(i+1):(i+1);
            l_ol[i].innerHTML='<span class="dayofweek">'+dayofweek(year,month-1,i+1)+'</span>'+dayofmonth;
            if(i<day){
                l_ol[i].style.display="flex";
            }else{
                l_ol[i].style.display="none";
            }
        }
    }
    function dayofweek(year,month,day){
        var wd = new Date(year,month,day).getDay();
        switch(wd){
            case 1:return "一";break;
            case 2:return "二";break;
            case 3:return "三";break;
            case 4:return "四";break;
            case 5:return "五";break;
            case 6:return "六";break;
            case 0:return "日";break;
        }

    }
    $('#showYearPicker').on('click', function () {
        weui.picker([
            { label: '2014', value: 2014},
            { label: '2015', value: 2015},
            { label: '2016', value: 2016},
            { label: '2017', value: 2017},
            { label: '2018', value: 2018},
            { label: '2019', value: 2019},
            { label: '2020', value: 2020},
            { label: '2021', value: 2021}
        ], {
            defaultValue:[new Date().getFullYear()],
            onChange: function (result) {
                $('#showYearPicker').html(result+" 年");
                initDay();
            },
            onConfirm: function (result) {
//                console.log(result);
            }
        });
    });

    $('#showMonthPicker').on('click', function () {
        weui.picker([
            { label: '1', value: 1},
            { label: '2', value: 2},
            { label: '3', value: 3},
            { label: '4', value: 4},
            { label: '5', value: 5},
            { label: '6', value: 6},
            { label: '7', value: 7},
            { label: '8', value: 8},
            { label: '9', value: 9},
            { label: '10', value: 10},
            { label: '11', value: 11},
            { label: '12', value: 12}
        ], {
            defaultValue: [new Date().getMonth()+1],
            onChange: function (result) {
                $('#showMonthPicker').html(result+" 月");
                initDay();
            },
            onConfirm: function (result) {
                console.log("confirm...");
//                console.log(result);
            },
            onCancle: function(result){
                console.log("cancle...");
            }
        });
    });
</script>

<script >
    function show(obj){
        obj.style.border="2px solid #7b9d6f";
        obj.style.border
        setTimeout(cover,100,obj);
    }
    function cover(obj){
        obj.style.border=null;
    }
</script>

<script type="text/javascript">
    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
</script>

<script src="./assets/js/jquery.mobile.custom.min.js"></script>
<script src="./assets/js/main.js"></script> <!-- Resource jQuery -->

<script src="./assets/weui/dist/example/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=60520182" charset="UTF-8"></script>
</body>
</html>